<script setup lang="ts">
import { ref, type PropType, computed } from 'vue'
import { type ShopOrderItem, ORDERSTATUS } from '@/pages/order/types'

type PayStatus = keyof typeof ORDERSTATUS | undefined
/**
 * 商品展示
 * @property {info} 包裹信息
 * @property {isDetail} 详情展示方式 默认列表
 * @property {payStatus} 支付状态
 * @property {isShowBtn} 是否展示下面按钮若展示payStatus必填
 */
const $props = defineProps({
  info: {
    type: Object as PropType<ShopOrderItem>,
    default() {
      return {}
    },
  },
  isDetail: {
    type: Boolean,
    default: false,
  },
  payStatus: {
    type: String as PropType<PayStatus>,
    default: '',
  },
  navigateToGoodsInfo: { type: Boolean, default: true },
  isShowBtn: { type: Boolean, default: false },
  rightFlex: { type: Boolean, default: false },
  priceFlex: { type: Boolean, default: false },
  orderNo: { type: String, default: '' },
  orderListShowAfsStatus: { type: Boolean, default: false },
})
const { divTenThousand } = useConvert()
// 选择打开 售后弹层
// const isShowSheet = ref(false)
// const selectionList = ref<AfssTypeItem[]>([])
/**
 * 售后状态
 */

// const afsStatus = computed(() => getAsfsStatusBtnCn($props.info.afsStatus))
const dealPrice = computed(() => ($props.info?.dealPrice ? divTenThousand($props.info.dealPrice) : 0))

// initARefundType()

// /**
// //  * 选择售后方式
// //  */
// function initARefundType() {
//     for (const [key, val] of Object.entries(aRefundType)) {
//         selectionList.value.push({
//             fontSize: 28,
//             text: val,
//             key,
//         })
//     }
// }
// /**
// //  * 包裹发货状态
// //  */
// const packageStatus = (packageStatus?: keyof typeof PACKAGESTATUS) => {
//     return packageStatus ? getPackagecn(packageStatus) : '待发货'
// }
// /**
// //  * 导航去申请售后(设置缓存拿的最新数据)
// //  */
// const handleGoApplyAfterSales = () => {
//     storage.set('applyAfterSalesOrder', $props.info)
//     if (afsStatus.value !== '申请售后')
//         return uni.navigateTo({
//             url: `/basePackage/pages/detailsRefund/DetailsRefund?no=${$props.info.afsNo}&packageId=${$props.info.packageId}`,
//         })
//     isShowSheet.value = true
// }
// /**
// //  * 申请退款 || 申请退货退款
// //  */
// const handleClickSheet = (index: number) => {
//     uni.navigateTo({
//         url: `/basePackage/pages/applyAfterSales/ApplyAfterSales?type=${selectionList.value[index].key}&no=${$props.orderNo}&itemId=${$props.info?.id}`,
//     })
// }
// /**
// //  * 去申请退款
// //  */
// const handleGoApplyRefund = () => {
//     uni.navigateTo({
//         url: `/basePackage/pages/applyAfterSales/ApplyAfterSales?type=${selectionList.value[0].key}&no=${$props.orderNo}&itemId=${$props.info?.id}`,
//     })
// }
// const handleNavToShop = () => {
//     if ($props.navigateToGoodsInfo) {
//         uni.navigateTo({
//             url: `/basePackage/pages/commodityInfo/InfoEntrance?goodId=${$props.info.productId}&shopId=${$props.info.shopId}`,
//         })
//     }
// }
// /**
// //  * 没发货加上运费 发货后不计运费  dealPrice*num - fixPrice <= 0《（freightPrice）
//  * info 0 元 购买 不展示售后按钮
// //  */
// function isAfsPriceComputed(info: ShopOrderItem) {
//     const { dealPrice, num, fixPrice, packageId, freightPrice } = info
//     const price = new Decimal(dealPrice).div(num).sub(fixPrice)
//     if (packageId) {
//         return divTenThousand(price).toNumber() <= 0
//     } else {
//         return divTenThousand(price.add(freightPrice)).toNumber() <= 0
//     }
// }
</script>
<template>
  <view class="good">
    <view class="good__item">
      <view class="good__item-container">
        <view class="good__item-left">
          <u-image :src="$props.info.image" width="100%" mode="scaleToFill" height="100%" border-radius="30" />
        </view>
        <view class="good__item-right" :class="{ 'good__item-right-flex': $props.rightFlex }">
          <view class="good__flex">
            <text :class="['good__item-right--title', $props.isDetail ? '' : 'is-overflow']">{{ $props.info.productName }}</text>
            <text v-if="!$props.isDetail" class="good__item-right--price">{{ dealPrice }}</text>
          </view>
          <view class="good__flex">
            <text class="good__item-right--spec">{{ $props.info.specs && $props.info.specs.join(',') }}</text>
            <text v-if="!$props.rightFlex" class="good__item-right--number">{{ $props.info.num }}</text>
            <!-- <text
                            v-if="getOrderListShowAfsStatusCn($props.info.afsStatus) && $props.orderListShowAfsStatus"
                            class="good__item-right--afs"
                        >
                            {{ getOrderListShowAfsStatusCn($props.info.afsStatus) }}
                        </text> -->
          </view>
          <!-- <view v-if="!$props.isDetail" class="good__item-right--status">{{getPackagecn($props.info.)}}</view> -->
          <view v-if="$props.isDetail" class="good__item-right--price" :class="{ 'good__item-right--price-flex': $props.priceFlex }">
            {{ dealPrice }}
            <text v-if="$props.rightFlex" class="good__item-right--number">{{ $props.info.num }}</text>
          </view>
          <!-- 如果订单关闭不展示按钮 WAITING_FOR_RECEIVE-->
        </view>
      </view>
      <!-- 申请售后按钮 -->
      <!-- <view v-if="$props.payStatus === 'PAID' && $props.isShowBtn && !isAfsPriceComputed($props.info)" class="good__item-bottom">
                <view class="good__item-bottom--status" shape="circle" plain>{{ packageStatus($props.info.packageStatus) }}</view>
                <u-button
                    v-if="$props.info.packageStatus === 'WAITING_FOR_DELIVER' && $props.info.afsStatus === 'NONE'"
                    plain
                    size="medium"
                    shape="circle"
                    class="afs-btn"
                    @click.stop="handleGoApplyRefund"
                >
                    申请退款
                </u-button>
                <u-button v-else plain size="medium" shape="circle" class="afs-btn" @click="handleGoApplyAfterSales">{{ afsStatus }}</u-button>
            </view> -->
    </view>
  </view>
  <!-- <u-action-sheet v-model="isShowSheet" :border-radius="20" :cancel-btn="false" :list="selectionList" @click="handleClickSheet" /> -->
</template>

<style lang="scss" scoped>
@import '@/assets/css/mixins/mixins.scss';
@include b(good) {
  @include e(item-container) {
    @include flex(flex-start, flex-start);
  }
  @include e(item) {
    margin-bottom: 14rpx;
  }
  @include e(item-bottom) {
    @include flex;
    justify-content: space-between;
    padding-bottom: 10rpx;
    @include m(status) {
      color: red;
      text-align: center;
    }
  }
  @include e(item-left) {
    width: 200rpx;
    height: 200rpx;
  }
  @include e(item-right-flex) {
    height: 180rpx;
    @include flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
  }
  @include e(item-right) {
    flex: 1;
    margin-left: 22rpx;
    @include m(title) {
      font-size: 28rpx;
    }
    @include when(overflow) {
      width: 260rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: bold;
    }
    @include m(price-flex) {
      width: 450rpx;
      @include flex;
      justify-content: space-between;
    }
    @include m(afs) {
      position: absolute;
      right: 0;
      top: 50rpx;
      font-size: 22rpx;
      color: #ffbf00;
    }
    @include m(price) {
      font-size: 30rpx;
      font-weight: bold;

      &::before {
        content: '￥';
        display: inline-block;
        font-size: 10rpx;
        margin-right: 2rpx;
      }
      & text {
        flex: 1;
        font-size: 24rpx;
        color: #777777;
        text-align: right;
      }
    }
    @include m(spec) {
      font-size: 24rpx;
      color: #777777;
    }
    @include m(number) {
      font-size: 24rpx;
      color: #121212;
      &::before {
        content: '×';
        display: inline-block;
      }
    }
    @include m(status) {
      font-size: 22rpx;
      color: #ffbf00;
      text-align: right;
    }
  }
  @include e(flex) {
    position: relative;
    @include flex(space-between);
    margin-bottom: 14rpx;
  }
}
@include b(afs-btn) {
  margin: 0;
  padding: 0 35rpx;
  z-index: 0;
}
@include b(afs) {
  color: #f12f22;
}
</style>
